<template>

  <div>
    <div class="wrapper">

      <div class="loginContainer"
           style="margin: 100px auto;background-color: #fff; width: 325px;height: 430px; padding: 20px;border-radius: 10px">
        <div class="login_title" style="text-align: center;font-size: 20px"><b>问卷系统登录</b></div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-select v-model="value" @change="changeHandler" placeholder="请选择账户类型">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="[item.label,item.id]">
            </el-option>
          </el-select>
          <el-tab-pane style="color:#42b983" label="账号登录" name="first">

            <el-input v-model="user.account" type="text" style="margin: 10px 0" prefix-icon="el-icon-user"
                      placeholder="请输入账号"></el-input>
            <el-input v-model="user.password" type="password" style="margin: 10px 0"
                      prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
            <el-button class="forgetPwd" @click="ToFindp()" size="mini" style="margin:0;padding-left:0;border-color: #FFFFFF;color: #42b983 ;background-color: #fff">
              忘记密码？
            </el-button>

          </el-tab-pane>
          <el-tab-pane style="color:#42b983" label="短信登录" name="second">
            <el-input  style="margin: 10px 0" prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号"
                      v-model="this.ruleForm.phoneNumber"></el-input>
            <el-input  style="margin: 10px 0px 32px" prefix-icon="el-icon-s-promotion" placeholder="请输入验证码">
              <el-button slot="append">获取验证码</el-button>
              <!--                          <el-button v-else slot="append" :disabled="disabled">{{second}}秒后获取</el-button>-->
            </el-input>
          </el-tab-pane>
        </el-tabs>
        <button class="login" @click="login"> 登录
        </button>
        <button class="register" @click="onClick()"> 注册
        </button>
        <!--        <el-button type="primary"style="width:46%;background: #42b983" autocomplete="off" @click="login">登录</el-button>-->
        <!--        <el-button style="width: 46%" @click="onClick()">注册</el-button>-->
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      user: {},
      ruleForm: {
        type: '',
        typeQ: ''
      },
      activeName: 'first',
      options: [{//身份选择
        id: '1',
        label: '管理员'
      }, {
        id: '2',
        label: '租户'
      }, {
        id: '3',
        label: '用户'
      }, {
        id: '4',
        label: '答者'
      }],
      value: ''
    }
  },
  methods: {
    onClick() {
      this.$router.push({path: '/Register'})
    },
    ToFindp() {
      this.$router.push({path: '/FindPwd'})
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    changeHandler: function (e) {
      this.ruleForm.type = e[0]
      this.ruleForm.typeQ = e[1]
    },
    //账号登录
    login() {
      let type;
      let empty = false;
      switch (this.ruleForm.typeQ) {
        case '1':
          type = 'manager';
          break;
        case '2':
          type = 'tenant';
          break;
        case '3':
          type = 'consumer';
          break;
        case '4':
          type = 'respondent';
          break;
        default:
          empty = true;
      }
      if (empty) {
        this.$notify.error({
          title: '错误',
          message: '请选择您的账户类型'
        });
      } else {
        console.log(this.user);
        if (type == 'manager') {
          this.$router.push({path: '/Manager/'})
        } else {
          this.axios.post('http://localhost:9090/' + type + '/login', this.user).then((resp) => {
            console.log(resp);
            if (resp.data) {
              this.ruleForm = {};
              this.$notify({
                title: '成功',
                message: '这是一条成功的提示消息',
                type: 'success'
              });
              if (type == 'tenant') {
                this.$router.push({path: '/Tenant/'})
              } else if (type == 'consumer') {
                this.$router.push({path: '/Consumer/'})
              } else if(type=='respondent'){
                this.$router.push({path: '/Respondent/'})
              }
              // this.$router.push({path: '/Home'})
            } else {
              this.$notify.error({
                title: '错误',
                message: '账号或密码错误'
              });
            }
          })
        }

      }
    }
  }
}
</script>

<style scoped>
.loginContainer {
  background-clip: padding-box;
  margin: 0px 0px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.65);
}

body {
  margin: 0px;
  padding: 0px;
}

.login_title {
  text-align: center;
  margin: 20px 0 40px auto;
}

.wrapper {
  height: 100vh;
  background-image: url("@/views/bg.png");

  /*背景图不缩放*/
  background-size: cover;
  webkit-background-size: cover;
  -o-background-size: cover;
  /*背景图不滚动*/
  background-attachment: fixed;

  overflow: hidden;
}
button.register {
  margin: 15px 20px 0px 50px;
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #212121;
  z-index: 1;
  background: #e8e8e8;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
}

button.register::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #212121;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
}

button.register:hover {
  color: #e8e8e8;
}

button.register:hover::before {
  width: 100%;
}
button.login {
  margin: 15px 20px 0px 20px;
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #fff;
  z-index: 1;
  background: #42b983;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
}

button.login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  border-color: #FFFFFF;
  background-color: #FFFFFF;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
}

button.login:hover {
  color: #42b983;
}

button.login:hover::before {
  width: 100%;
}
</style>